<script setup>
import {onLoad} from "@dcloudio/uni-app"
import {ref, onMounted} from 'vue'

const tradeInfo = ref({})
const total = ref(0)
const commentPopup = ref(null)
const trade = ref(null)
onLoad(option => {
  const {page} = option
  onMounted(async () => {
    const res = await uni.request({
      url: `http://localhost:3000/consultationInfo?id=${page}`
    })
    tradeInfo.value = res.data.data
    console.log(tradeInfo.value)
    total.value = tradeInfo.value.comments.length
    for (let v of tradeInfo.value.comments) total.value += v.replies.length
  })
})
const commentText = ref('')
const curUser = ref(tradeInfo.value.userName)
const subit = () => {
  console.log(commentText.value);
  const data = ref({
    "userAvatarUrl": "https://tse2-mm.cn.bing.net/th/id/OIP-C.3P8qIgIHeaQGWolYn34_ZgAAAA?w=188&h=188&c=7&r=0&o=5&pid=1.7",
    "userName": "Router",
    "commentText": commentText.value,
    "commentTime": new Date(),
    "replies": []
  })
  if (tradeInfo.value.userName !== curUser.value) {
    const index = tradeInfo.value.comments.findIndex(v => v.userName === curUser.value)
    if (index !== -1) tradeInfo.value.comments[index].replies.unshift(data.value)
  } else tradeInfo.value.comments.unshift(data.value)
  total.value++
  commentText.value = ''
  commentPopup.value.close()
  show.value = true
}
const focus = ref(false)
const show = ref(true)
const navgateTo = () => {
  uni.navigateTo({
    url: '/pages/chat/chat'
  })
}
</script>
<template>
  <div v-if="tradeInfo.userName" ref="trade" class="tradeInfo">
    <div class="content">
      <div class="user-container">
        <div class="user">
          <image :src="tradeInfo.userAvatarUrl" class="user-image"></image>
          <div class="name">{{ tradeInfo.userName }}</div>
        </div>
        <div
            :style="{color: tradeInfo.concern ? '#999999' : 'black'}"
            class="concern link"
            @click="tradeInfo.concern = !tradeInfo.concern"
        >
          {{ tradeInfo.concern ? '已关注' : '+ 关注' }}
        </div>
      </div>
      <div class="price" style="">
        <span style="color: #999; font-size: 14px;"><span
            style="margin-right: 5px;">242人想要</span><span>3.8万浏览</span></span>
      </div>
      <rich-text :nodes="tradeInfo.content.text.replaceAll(/[。；]/g,'<br/>')"></rich-text>
      <div class="images" style="margin-top: 10px; border-radius: 10px; overflow: hidden;">
        <image v-for="(url,i) in tradeInfo.content.urls" :key="i" :src='url'
               class="image" style="width: 100%; border-radius: 10px;"></image>
      </div>
    </div>
    <div class="comments">
      <div class="container content">
        <div class="total" style="font-size: 18px;font-weight: bold;">{{ total }}条留言</div>
        <div class="message link" @click="()=>{
					focus=true
					show=false
					commentPopup.open('bottom')
					curUser = tradeInfo.userName
				}">
          <image class="img"
                 src='https://tse2-mm.cn.bing.net/th/id/OIP-C.3P8qIgIHeaQGWolYn34_ZgAAAA?w=188&h=188&c=7&r=0&o=5&pid=1.7'></image>
          <div class="input">看对眼就留言, 问问更多细节~</div>
        </div>
        <div v-for="(comment, i) in tradeInfo.comments" :key="i" class="comment link" @click="()=>{
					focus=true
					show=false
					commentPopup.open('bottom')
					curUser=comment.userName
				}">
          <image :src="comment.userAvatarUrl" class="img"></image>
          <div class="comment-content">
            <div class="name" style="color: #555;font-size: 13px;">{{ comment.userName }}</div>
            <div class="text" style="font-weight: 550;font-size: 13px;">{{ comment.commentText }}</div>
            <template v-for="(replie,i) in comment.replies" v-if="comment.replies[0]" :key="i">
              <div class="replie link" @click="()=>{
								focus=true
								show=false
								commentPopup.open('bottom')
								curUser=tradeInfo.userName
							}">
                <image :src="replie.userAvatarUrl" class="img" style="width: 25px;height: 25px;"></image>
                <div class="comment-content">
                  <div class="name" style="color: #555;font-size: 13px;">{{ replie.userName }}</div>
                  <div class="text" style="font-weight: 550;font-size: 13px;">{{ replie.commentText }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="title">-超过90天或涉嫌违规的留言将被隐藏</div>
    <div v-if="show" class="social-actions">
      <div class="social comment link">
        <img alt="" class="img" src="../../static/comment.png"/>
        <span class='title'>{{ total }}</span>
      </div>
      <div class="input link" @click="()=>{
				focus=true
				show=false
				commentPopup.open('bottom')
				curUser=tradeInfo.userName
			}">说点什么
      </div>
      <div class="button one link">买同款</div>
      <div class="button two link" @click="navgateTo">我想要</div>
    </div>
  </div>
  <uni-popup ref="commentPopup" background-color="#fff" border-radius="10px 10px 0 0" type="bottom"
             @maskClick="show=true">
    <view class="commentPopup content">
      <div class="container">
        <input
            v-model="commentText"
            :focus="focus"
            class="comment-input"
            placeholder="看对眼就留言, 问问更多细节~"
            type="text"
            @blur="focus = false"
        />
        <button class="submit" @click="subit">发送</button>
      </div>
    </view>
  </uni-popup>
</template>

<style scoped>
.tradeInfo {
  width: 100vw;
  height: 100vh;
}

.tradeInfo > .content {
  padding-bottom: 25px;
}

.tradeInfo > .content > .user-container {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.tradeInfo > .content > .user-container > .user {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.tradeInfo > .content > .user-container > .user > .user-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.tradeInfo > .content > .user-container > .user > .name {
  width: 60px;
  height: 100%;
  line-height: 40px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}

.tradeInfo > .content > .user-container > .concern {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  font-weight: 550;
  background-color: rgb(230, 230, 230);
}

.tradeInfo > .content > .price {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
}

.tradeInfo > .comments {
  width: 100%;
  padding-top: 10px;
  background: #eee;
  overflow: hidden;
}

.tradeInfo > .comments > .container {
  width: 100%;
  height: 100%;
  background: white;
}

.tradeInfo > .comments > .container > .comment > .comment-content,
.tradeInfo > .comments > .container > .comment > .comment-content > .replie > .comment-content {
  width: calc(100% - 50px);
  height: 100%;
}

.tradeInfo > .comments > .container .link,
.tradeInfo > .comments > .container > .comment > .comment-content > .link {
  margin-top: 30px;
}

.tradeInfo > .comments > .container > .message {
  width: 100%;
  height: 40px;
  display: flex;
}

.tradeInfo > .comments > .container > .message > .img,
.tradeInfo > .comments > .container > .comment > .img,
.tradeInfo > .comments > .container > .comment > .comment-content > .replie > .img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.tradeInfo > .comments > .container > .message > .input {
  height: 100%;
  line-height: 40px;
  width: calc(100% - 50px);
  border-radius: 25px;
  background: #eee;
  padding-left: 20px;
  color: #888;
}

.tradeInfo > .comments > .container > .comment,
.tradeInfo > .comments > .container > .comment > .comment-content > .replie {
  width: 100%;
  display: flex;
}

.tradeInfo > .title {
  text-align: center;
  font-size: 13px;
  color: #777;
  margin-bottom: 30px;
  margin-top: 20px;
}

.tradeInfo > .social-actions {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: rgb(248, 248, 248);
  padding: 5px 10px 5px 10px;
  display: flex;
  align-items: center;
  z-index: 999999;
}

.tradeInfo > .social-actions > .social {
  width: 25px;
  height: 50px;
  margin-right: 25px;
}

.tradeInfo > .social-actions > .input {
  width: 100px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  border-radius: 25px;
  background-color: #eee;
  font-size: 14px;
  margin-right: 20px;
}

.tradeInfo > .social-actions > .button {
  width: 100px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
  border-radius: 20px;
  margin-right: 20px;
  background-color: #eee;
}

.tradeInfo > .social-actions > .two {
  margin-right: 0;
  background-color: yellow;
}

.tradeInfo > .social-actions > .social > .img {
  width: 25px;
  height: 25px;
}

.tradeInfo > .social-actions > .social > .title {
  font-size: 12px;
  color: #555;
  display: block;
  text-align: center;
}

.commentPopup {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
}

.commentPopup > .container {
  width: 100%;
  height: 35px;
  display: flex;
}

.commentPopup > .container > .comment-input {
  width: calc(100% - 100px);
  height: 100%;
  border-radius: 25px;
  background: #eee;
  padding-left: 20px;
  /* outline: 1px solid red; */
}

.commentPopup > .container > .submit {
  line-height: 35px;
  height: 100%;
  border-radius: 20px;
  background: yellow;
}
</style>